<template>
  <div>
        <h1>车位上架</h1>
     <!-- 内容表单 -->
     <table class="intable" cellspacing="20"> 
          <thead>
              <tr>
                  <td>车位ID</td>
                   <td>车位号</td>
                    <td>车位地址</td>
                     <td>产权信息</td>
                     <td>车位价格</td>
                      <td>出租周期</td>
                       <td>车位状态</td>
                       <td>车位图片</td>
                          <td>操作</td>
              </tr>
          </thead>
          <tbody>
            <template v-for="item in tableData.parkings">
               <tr :key='item._id'>
                  <td>{{item._id}}</td>
                  <td>{{item.carNumber}}</td>
                  <td>{{item.address}}</td>
                   <td>{{item.property}}</td>
                    <td>{{item.price}}</td>
                      <td>{{item.cycle}}个月</td>
                        <td>未上架</td>
                        <td> <img :src="  'http://localhost:3000/images/' +
                            (item.imagesName || 'default.jpg')" style="width:50px;height:50px"> </td>
                     <td><button  @click="putaway({_id:item._id,carNumber:item.carNumber,cycle:item.cycle,property:item.property,price:item.price})" >上架</button></td>
              </tr>
              </template>
          </tbody>
      </table>
  <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[2,4,6,8]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.total">
    </el-pagination>
  </div>
  </div>
</template>

<script>
import axios from "axios"
import LessorsNav from "../../components/lessors/LessorsNav.vue";
const jwt = require("jsonwebtoken");
import { createNamespacedHelpers } from "vuex";
import { TOKEN_KEY } from "../../../../node-parking/utils/const";
const { mapState,mapActions} = createNamespacedHelpers("parkings");
export default {
    mounted() {
        const { username } = jwt.verify(localStorage.token, TOKEN_KEY);
        const { _id } = jwt.verify(localStorage.token, TOKEN_KEY);
         this.inlessorsId=_id
         this.tableData.state="2"
        this.formInline.seatchval=""
        this.getparkings(_id)
    },
  data() {
    return {
    inlessorsId:"",
    };
  },
    components: {
        LessorsNav,
    },
     computed:{
    ...mapState(["formInline","tableData","lessorsId"])
    },
  methods: {
      //数据渲染
     ...mapActions(["getparkings"]),
  
    //上架
    async putaway(val) {
         console.log(val)
       const {data} = await axios({
       url:'/xg/inxgPArkings',
       method:"get",
       params:{
           _id:val._id,
           carNumber:val.carNumber,
            price:val.price,
            property:val.property,
            cycle:val. cycle,
            state:4
       }
     })
     if(data.status){
          alert("车位上架成功")
           this.getparkings(this.inlessorsId)
     }
      },
      //分页
      handleSizeChange(val) {
       this.tableData.pageSize=val
      this.getparkings(this.inlessorsId)
      },
      handleCurrentChange(val) {
      this.tableData.currentPage=val
      this.getparkings(this.inlessorsId)
      }
  }
};
</script>

<style lang="scss">
.block {
    text-align: center;
}
.intable{
  width: 100%;
  padding: 20px;
  color: #606266;
  font-size: 15px;
  thead{
    color: #909399;
      font-size: 16px;
  }
  button{
    padding:7px 15px;
    color: #3a8ee6;
  }
}
</style>